{{- extends "layout/default" }}
{{- block body() }}
<div class="row justify-content-center g-4" data-hx-boost="false">

  <div class="col-12 col-lg-9">
    {* NOTE: inside the col element since the nav is only 3 columns wide *}
    <h1 class="mb-4"><i class="bi bi-gear me-2"></i>Settings</h1>

    <p class="card-text">PixivFE uses <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies">cookies</a> to store your preferences, which you can change on this page to customize your experience on this instance.</p>
    <noscript>
    {{- include "noscript/settings" }}
    </noscript>
    <div class="row js-required">
      <div class="col-12 col-lg-3 mb-3 mb-lg-0">
        <!-- Tabs -->
        <nav class="nav nav-pills nav-fill d-flex flex-column fw-bold" id="settingsTabs" role="tablist">
          <!-- TODO: update nav buttons to use charcoal colours -->
          <button class="btn btn-dark rounded-pill border-0 flex-fill fw-bold mb-1 active" id="account-tab" data-bs-toggle="tab" data-bs-target="#account" type="button" role="tab" aria-controls="account" aria-selected="true">Account</button>

          <button class="btn btn-dark rounded-pill border-0 flex-fill fw-bold mb-1" id="site-tab" data-bs-toggle="tab" data-bs-target="#site" type="button" role="tab" aria-controls="site" aria-selected="false">Site</button>

          <button class="btn btn-dark rounded-pill border-0 flex-fill fw-bold mb-1" id="novels-tab" data-bs-toggle="tab" data-bs-target="#novels" type="button" role="tab" aria-controls="novels" aria-selected="false">Novels</button>

          <button class="btn btn-dark rounded-pill border-0 flex-fill fw-bold mb-1" id="language-tab" data-bs-toggle="tab" data-bs-target="#language" type="button" role="tab" aria-controls="language" aria-selected="false">Language</button>

          <button class="btn btn-dark rounded-pill border-0 flex-fill fw-bold mb-1" id="advanced-settings-tab" data-bs-toggle="tab" data-bs-target="#advanced-settings" type="button" role="tab" aria-controls="advanced-settings" aria-selected="false">Cookies</button>

          <button class="btn btn-dark rounded-pill border-0 flex-fill fw-bold" id="reset-tab" data-bs-toggle="tab" data-bs-target="#reset" type="button" role="tab" aria-controls="reset" aria-selected="false">Reset</button>
        </nav>
      </div>

      <div class="col-12 col-lg-9">
        <div class="custom-card bg-charcoal-surface1 p-4">
          <!-- Tab content -->
          <div class="tab-content" id="settingsTabsContent">
            <!-- Account tab -->
            <div class="tab-pane fade show active" id="account" role="tabpanel" aria-labelledby="account-tab">
              <h2 class="mb-4">Account</h2>

              <fieldset>
                <legend class="fs-5 fw-bold">Log in</legend>
                <p>
                  Log in with your Pixiv account's cookie to access the features below. To learn how to obtain your cookie, please see <a href="https://pixivfe-docs.pages.dev/obtaining-pixivfe-token/">the guide on obtaining your PixivFE token</a>.
                </p>
                <p>Supported features (for now):</p>
                <ul class="mb-3">
                  <li>Discovery page</li>
                  <li>Landing page</li>
                  <li>Like/Bookmark</li>
                </ul>
                <p>Cookies will be saved on your browser, and will expire after a fixed period of time.</p>
                <form id="login-form" hx-post="/settings/token" hx-target="next #form-htmx-target" hx-swap="outerHTML">
                  <div class="mb-3">
                    <label for="token" class="form-label"><span class="fw-bold">PixivFE token</span></label>
                    <input type="password" class="form-control" id="token" name="token" placeholder="123456_AaBbccDDeeFFggHHIiJjkkllmMnnooPP" />
                    <div id="tokenHelpBlock" class="form-text">The underscore separates your member ID (left side) from a random string (right side).</div>
                  </div>
                  <button type="submit" class="btn btn-primary fw-bold rounded-pill">Log in</button>
                </form>
                <div id="form-htmx-target"></div>
              </fieldset>

              <hr class="my-4">

              <fieldset>
                <legend class="fs-5 fw-bold">Log out</legend>
                <p>To securely end your session, click the 'Log out!' button. This will immediately remove your session token.</p>
                <form id="logout-form" hx-post="/settings/logout" hx-target="next #form-htmx-target" hx-swap="outerHTML">
                  <button type="submit" class="btn btn-danger fw-bold rounded-pill">Log out!</button>
                </form>
                <div id="form-htmx-target"></div>
              </fieldset>
            </div>

            <!-- Site tab -->
            <div class="tab-pane fade" id="site" role="tabpanel" aria-labelledby="site-tab">
              <h2 class="mb-4">Site</h2>

              <fieldset>
                <legend class="fs-5 fw-bold">Image proxy server</legend>
                <p>Choose how images are loaded in PixivFE by selecting either the built-in proxy or one of the provided external proxy servers.</p>
                <p>If you prefer, you can also specify a custom proxy server by entering its URL manually.</p>
                <form id="image-proxy-form" hx-post="/settings/imageServer" hx-target="next #form-htmx-target" hx-swap="outerHTML">
                  <div class="mb-3">
                    <label for="current-image-proxy" class="form-label fw-bold"> Current image proxy server </label>
                    {* TODO: there's probably a better way of doing this *}
                    {{ a, _ := CookieList["pixivfe-ImageProxy"] }} {{- if a != "" -}}
                    <input class="form-control" type="text" value="{{ a }}" aria-label="Current image proxy" id="current-image-proxy" disabled readonly />
                    {{- else }}
                    <input class="form-control" type="text" value="{{ .DefaultProxyServer }}" aria-label="Current image proxy" id="current-image-proxy" disabled readonly />
                    {{ end -}}
                    <div id="current-image-proxy-help" class="form-text">The image proxy server currently set.</div>
                  </div>
                  <div class="mb-3">
                    <label for="image-proxy" class="form-label fw-bold">Select image proxy server</label>
                    <select class="form-select" id="image-proxy" name="image-proxy" required data-proxy-check-enabled="{{ .ProxyCheckEnabled }}">
                      <option value="/proxy/i.pximg.net" data-proxy-type="working">/proxy/i.pximg.net (built-in proxy)</option>
                      {{- range .WorkingProxyList }}
                      <option value="{{.}}" data-proxy-type="working">{{.}}</option>
                      {{- end }} {{- range .ProxyList }}
                      <option value="{{.}}" data-proxy-type="all" style="display: none">{{.}}</option>
                      {{- end }}
                    </select>
                    <div id="image-proxy-help" class="form-text">Choose a proxy server to load images through.</div>
                  </div>
                  <div class="form-check form-switch mb-3">
                    <input class="form-check-input" type="checkbox" role="switch" id="show-all-proxies" />
                    <label class="form-check-label fw-bold" for="show-all-proxies">Show all proxy servers</label>
                    <div id="show-all-proxies-help" class="form-text">Enable this to display all available proxy servers, including those that may not be currently working.</div>
                  </div>
                  {{ if .ProxyCheckEnabled == false }}
                  <div class="alert alert-warning" role="alert">
                    <p>
                      <i class="bi bi-exclamation-triangle-fill"></i> This PixivFE instance has been configured to <span class="fw-bold">not</span> check the list of built-in image proxies (<a href="https://pixivfe-docs.pages.dev/hosting/environment-variables/#pixivfe_proxy_check_enabled" class="text-decoration-none"><code class="bg-dark-subtle rounded p-1">PIXIVFE_PROXY_CHECK_ENABLED=false</code></a> has been set).
                    </p>
                    <p class="mb-0">All image proxies will be shown by default, regardless of their actual state.</p>
                  </div>
                  {{- else -}}
                  <p>This PixivFE instance has been configured to check the list of built-in image proxies every {{ .ProxyCheckInterval }}.</p>
                  <p>Image proxies that fail this check will not be shown unless "Show all proxy servers" is enabled.</p>
                  {{- end -}}
                  <div class="mb-3">
                    <label for="custom-image-proxy" class="form-label fw-bold">Custom image proxy server</label>
                    <input type="text" class="form-control" id="custom-image-proxy" name="custom-image-proxy" placeholder="https://example.com" autocomplete="off" />
                    <div id="custom-image-proxy-help" class="form-text">Enter the URL of a custom proxy server if you wish to use one not listed above.</div>
                  </div>
                  <button type="submit" class="custom-btn-secondary">Save</button>
                </form>
                <div id="form-htmx-target"></div>
              </fieldset>

              <hr class="my-4">

              <fieldset>
                <legend class="fs-5 fw-bold">Filter artworks</legend>
                <p>Toggle the switches below to hide specific types of content. Disabled switches will allow the content to be shown.</p>
                <form id="filter-form" hx-post="/settings/filter" hx-target="next #form-htmx-target" hx-swap="outerHTML">
                  {{- hideR18 := CookieList["pixivfe-HideArtR18"] }}
                  {{- hideR18G := CookieList["pixivfe-HideArtR18G"] }}
                  {{- hideAI := CookieList["pixivfe-HideArtAI"] }}
                  <div class="mb-3 form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="filter-r18" name="filter-r18" value="1" {{- if hideR18 != "" }}checked{{- end }} />
                    <label class="form-check-label fw-bold" for="filter-r18">Hide explicit content (R-18)</label>
                    <div id="filter-r18-help" class="form-text">
                      Hides artwork tagged as R18. This includes sexually explicit material suitable for adults (<a href="https://dic.pixiv.net/en/a/R-18" target="_blank" and rel="noopener noreferrer" class="text-decoration-none">entry on pixiv Encyclopedia<i class="bi bi-box-arrow-up-right align-top small ms-1"></i></a>).
                    </div>
                  </div>
                  <div class="mb-3 form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="filter-r18g" name="filter-r18g" value="1" {{- if hideR18G != "" }}checked{{- end }} />
                    <label class="form-check-label fw-bold" for="filter-r18g">Hide ero-guro content (R-18G)</label>
                    <div id="filter-r18g-help" class="form-text">
                      Hides artwork tagged as R18G. This includes extremely graphic or violent material (<a href="https://dic.pixiv.net/en/a/R-18G" target="_blank" and rel="noopener noreferrer" class="text-decoration-none">entry on pixiv Encyclopedia<i class="bi bi-box-arrow-up-right align-top small ms-1"></i></a>).
                    </div>
                  </div>
                  <div class="mb-3 form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="filter-ai" name="filter-ai" value="1" {{- if hideAI != "" }}checked{{- end }} />
                    <label class="form-check-label fw-bold" for="filter-ai">Hide AI-generated artworks</label>
                    <div id="filter-ai-help" class="form-text">Hides artwork that has been tagged as AI-generated. This helps focus on human-created content.</div>
                  </div>
                  <button type="submit" class="custom-btn-secondary">Save</button>
                </form>
                <div id="form-htmx-target"></div>
              </fieldset>

              <hr class="my-4">

              <fieldset>
                <legend class="fs-5 fw-bold">Open artworks in new tab</legend>
                <p>Choose whether clicking on artwork thumbnails opens the full artwork in the same tab or a new tab.</p>
                <form id="ttnt-form" hx-post="/settings/thumbnailToNewTab" hx-target="next #form-htmx-target" hx-swap="outerHTML">
                  {{- ttntValue := CookieList["pixivfe-ThumbnailToNewTab"] }}
                  <div class="mb-3 form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="ttnt-switch" name="ttnt" value="_blank" {{- if ttntValue == "_blank" }}checked{{- end }} />
                    <label class="form-check-label fw-bold" for="ttnt-switch">Open in new tab</label>
                    <div id="ttnt-switch-help" class="form-text">When enabled, clicking on artwork thumbnails will open the full artwork in a new browser tab.</div>
                  </div>
                  <button type="submit" class="custom-btn-secondary">Save</button>
                </form>
                <div id="form-htmx-target"></div>
              </fieldset>

              <hr class="my-4">

              <fieldset>
                <legend class="fs-5 fw-bold">Artwork preview pop-ups</legend>
                {{- artworkPreviewValue := CookieList["pixivfe-ArtworkPreview"] }}
                <p>Configure how artwork previews are displayed when interacting with thumbnails.</p>
                <form id="artwork-preview-form" hx-post="/settings/artworkPreview" hx-target="next #form-htmx-target" hx-swap="outerHTML">
                  <div class="form-check mb-3">
                    <input class="form-check-input" type="radio" name="app" id="app-c" value="cover" {{- if artworkPreviewValue == "cover" }}checked{{- end }} />
                    <label class="form-check-label fw-bold" for="app-c"> Cover </label>
                    <div id="app-c-help" class="form-text">Open the previewer when you click into the thumbnails. This allows for quick previews without leaving the current page.</div>
                  </div>
                  <div class="form-check mb-3">
                    <input class="form-check-input" type="radio" name="app" id="app-b" value="button" {{- if artworkPreviewValue == "button" }}checked{{- end }} />
                    <label class="form-check-label fw-bold" for="app-b"> Button </label>
                    <div id="app-b-help" class="form-text">Add a button at the bottom-right of the thumbnails and open the previewer when you click into it. This provides more control over when previews are shown.</div>
                  </div>
                  <div class="form-check mb-3">
                    <input class="form-check-input" type="radio" name="app" id="app-d" value="" {{- if artworkPreviewValue == "" }}checked{{- end }} />
                    <label class="form-check-label fw-bold" for="app-d"> Disable </label>
                    <div id="app-d-help" class="form-text">No previewing. Clicking on thumbnails will directly open the full artwork page.</div>
                  </div>
                  <button type="submit" class="custom-btn-secondary">Save</button>
                </form>
                <div id="form-htmx-target"></div>
              </fieldset>

              <hr class="my-4">

              <fieldset>
                <legend class="fs-5 fw-bold">Logo style</legend>
                {{- logoStyleValue := CookieList["pixivfe-LogoStyle"] }}
                <p>Choose between the standard PixivFE logo or an alternative design created by <a href="https://codeberg.org/VnPower/PixivFE/issues/4#issuecomment-1017835" rel="noopener">@dragongoose</a> as a fun variation.</p>
                <form id="locale-form" hx-post="/settings/set-cookie" hx-target="next #form-htmx-target" hx-swap="outerHTML" class="row g-2 me-2">
                  <input type="hidden" name="key" value="pixivfe-LogoStyle">
                  <div class="col-auto">
                    <select class="form-select" id="locale" name="value" required>
                      <option value="standard" {{- if logoStyleValue == "standard" || logoStyleValue == "" }} selected{{- end }}>Standard</option>
                      <option value="alternative" {{- if logoStyleValue == "alternative" }} selected{{- end }}>Alternative</option>
                    </select>
                  </div>
                  <div class="col-auto">
                    <button type="submit" class="custom-btn-secondary">Save</button>
                  </div>
                </form>
                <div id="form-htmx-target"></div>
              </fieldset>
            </div>

            <!-- Novels tab -->
            <div class="tab-pane fade" id="novels" role="tabpanel" aria-labelledby="novels-tab">
              <h2 class="mb-4">Novels</h2>

              <fieldset>
                <legend class="fs-5 fw-bold">Font family</legend>
                {{- novelFontTypeValue := CookieList["pixivfe-NovelFontType"] }}
                <p>Choose the font style for displaying novels. This affects the readability and aesthetic of the text.</p>
                <form id="novel-font-form" hx-post="/settings/novelFontType" hx-target="next #form-htmx-target" hx-swap="outerHTML">
                  <div class="form-check mb-3">
                    <input class="form-check-input" type="radio" name="font-type" id="font-type-mincho" value="mincho" {{- if novelFontTypeValue == "mincho" }}checked{{- end }} />
                    <label class="form-check-label fw-bold" for="font-type-mincho">Mincho</label>
                    <div id="font-type-mincho-help" class="form-text">A serif font style that resembles traditional Japanese printing. It's often used for formal or literary content, providing a classic and elegant look.</div>
                  </div>
                  <div class="form-check mb-3">
                    <input class="form-check-input" type="radio" name="font-type" id="font-type-gothic" value="gothic" {{- if novelFontTypeValue == "gothic" || novelFontTypeValue == "" }}checked{{- end }} />
                    <label class="form-check-label fw-bold" for="font-type-gothic">Gothic</label>
                    <div id="font-type-gothic-help" class="form-text">A sans-serif font style that's clean and modern. It's commonly used for easy readability on digital screens, offering a contemporary appearance.</div>
                  </div>

                  <div class="accordion mb-3" id="typeface-samples">
                    <div class="accordion-item">
                      <h2 class="accordion-header" id="heading-typefaces">
                        <button class="accordion-button collapsed bg-dark text-body" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-typefaces" aria-expanded="false" aria-controls="collapse-typefaces">Typeface samples</button>
                      </h2>
                      <!-- TODO: remove the inline styling used here -->
                      <div id="collapse-typefaces" class="accordion-collapse collapse" aria-labelledby="heading-typefaces" data-bs-parent="#typeface-samples">
                        <div class="accordion-body">
                          <div class="row">
                            <div class="col-md-6">
                              <h3 class="mb-3">Mincho</h3>
                              <p class="mb-0" style="font-family: &quot;Noto Serif JP&quot;, serif">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
                            </div>
                            <div class="col-md-6">
                              <h3 class="mb-3">Gothic</h3>
                              <p class="mb-0" style="font-family: &quot;Noto Sans JP&quot;, sans-serif">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <button type="submit" class="custom-btn-secondary">Save</button>
                </form>
                <div id="form-htmx-target"></div>
              </fieldset>

              <hr class="my-4">

              <fieldset>
                <legend class="fs-5 fw-bold">Force text orientation</legend>
                {{- novelViewModeValue := CookieList["pixivfe-NovelViewMode"] }}
                <p>Set the text orientation for novels. This affects how the text is displayed and read on the page.</p>
                <form id="novel-view-mode-form" hx-post="/settings/novelViewMode" hx-target="next #form-htmx-target" hx-swap="outerHTML">
                  <div class="form-check mb-3">
                    <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-h" value="1" {{- if novelViewModeValue == "1" }}checked{{- end }} />
                    <label class="form-check-label fw-bold" for="tx-ori-h">Horizontal</label>
                    <div id="tx-ori-h-help" class="form-text">Forces the text to be displayed horizontally, left-to-right. This is common for most languages and easier to read on smaller screens or for those more accustomed to Western text layouts.</div>
                  </div>
                  <div class="form-check mb-3">
                    <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-v" value="2" {{- if novelViewModeValue == "2" }}checked{{- end }} />
                    <label class="form-check-label fw-bold" for="tx-ori-v">Vertical</label>
                    <div id="tx-ori-v-help" class="form-text">Forces the text to be displayed vertically, top-to-bottom and right-to-left. This is traditional for some East Asian languages and can provide a unique reading experience, especially for longer texts.</div>
                  </div>
                  <div class="form-check mb-3">
                    <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-n" value="" {{- if novelViewModeValue == "" }}checked{{- end }} />
                    <label class="form-check-label fw-bold" for="tx-ori-n">Don't force (default from Pixiv)</label>
                    <div id="tx-ori-n-help" class="form-text">Uses the original text orientation as set by the author on Pixiv. This is the default option and respects the intended layout of the novel.</div>
                  </div>
                  <button type="submit" class="custom-btn-secondary">Save</button>
                </form>
                <div id="form-htmx-target"></div>
              </fieldset>
            </div>

            <!-- Cookies tab -->
            <div class="tab-pane fade" id="advanced-settings" role="tabpanel" aria-labelledby="advanced-settings-tab">
              <h2 class="mb-4">Cookies</h2>
              <p>This section allows you to directly manage PixivFE's cookie-based preferences. Intended for advanced users who understand the implications of changing these values.</p>
              <div class="alert alert-warning" role="alert">
                <p class="mb-0"><i class="bi bi-exclamation-triangle-fill"></i> Exercise caution when modifying these settings. Incorrect values may adversely affect PixivFE's functionality.</p>
              </div>

              <fieldset>
                <legend class="fs-5 fw-bold">Cookie values</legend>
                <p>View and edit individual cookie values. This is useful for fine-tuning specific preferences or troubleshooting issues.</p>
                {{- range CookieListOrdered }}
                <div class="mb-3">
                  <h4>{{ .k }}</h4>

                  <div class="d-flex">
                    <!-- Set cookie form -->
                    <form id="set-cookie-form-{{ .k }}" hx-post="/settings/set-cookie" hx-target="next #form-htmx-target" hx-swap="outerHTML" class="row g-2 me-2">
                      <input type="hidden" name="key" value="{{ .k }}" />

                      <div class="col-auto">
                        <label class="visually-hidden" for="cookieValue-{{ .k }}">Cookie Value</label>
                        <input id="cookieValue-{{ .k }}" type="text" class="form-control" name="value" value="{{- .v }}" />
                      </div>

                      <div class="col-auto">
                        <button type="submit" class="custom-btn-secondary">Set</button>
                      </div>
                    </form>

                    <!-- Clear cookie form -->
                    <form id="clear-cookie-form-{{ .k }}" hx-post="/settings/clear-cookie" hx-target="next #form-htmx-target" hx-swap="outerHTML" class="row g-2">
                      <input type="hidden" name="key" value="{{ .k }}" />

                      <div class="col-auto">
                        <button type="submit" class="btn btn-danger fw-bold rounded-pill">Clear</button>
                      </div>
                    </form>
                  </div>
                </div>
                {{- end }}
                <div id="form-htmx-target"></div>
              </fieldset>

              <hr class="my-4">

              <fieldset>
                <legend class="fs-5 fw-bold">Raw settings</legend>
                <p>This area displays all your current cookie values in a raw format. You can:</p>
                <ul class="mb-3">
                  <li>Copy these settings to quickly configure another PixivFE instance</li>
                  <li>Restore your settings if the current instance's cookies have expired</li>
                  <li>Make bulk changes to multiple preferences at once</li>
                </ul>
                <p>When importing settings, any invalid or unrecognized values will be ignored to prevent configuration errors.</p>
                <!-- Save raw settings -->
                <form id="raw-settings-form" hx-post="/settings/raw" hx-target="next #form-htmx-target" hx-swap="outerHTML">
                  <div class="mb-3">
                    <!-- NOTE: do not modify this <textarea> - weird whitespace will appear -->
                    <textarea class="form-control" name="raw" rows="10">
                      {{- range CookieListOrdered -}}{{ .k }}={{ .v + "\n" }}{{end -}}
                    </textarea>
                  </div>
                  <button type="submit" class="custom-btn-secondary">Set raw settings</button>
                  <div id="set-raw-settings-help" class="form-text">Applies the raw settings entered above. This action will overwrite your current configuration with the provided values.</div>
                </form>
                <div id="form-htmx-target"></div>
              </fieldset>
            </div>

            <!-- Language tab -->
            <div class="tab-pane fade" id="language" role="tabpanel" aria-labelledby="language-tab">
              <h2 class="mb-4">Language</h2>
              {* TODO: create a separate endpoint in routes/settings for a tailored confirmation message *}
              <fieldset>
                <legend class="fs-5 fw-bold">Display language</legend>
                {{- localeValue := CookieList["pixivfe-Locale"] }}
                <p>Select your preferred display language from the dropdown menu below.</p>
                <form id="locale-form" hx-post="/settings/set-cookie" hx-target="next #form-htmx-target" hx-swap="outerHTML" class="row g-2 me-2">
                  <input type="hidden" name="key" value="pixivfe-Locale">
                  <div class="col-auto">
                    <select class="form-select" id="locale" name="value" required>
                      <option value="en" {{- if localeValue == "en" || localeValue == "" }} selected{{- end }}>English</option>
                      <option value="vi-VN" {{- if localeValue == "vi-VN" }} selected{{- end }}>Vietnamese</option>
                      <option value="zh-TW" {{- if localeValue == "zh-TW" }} selected{{- end }}>Chinese Traditional</option>
                    </select>
                  </div>
                  <div class="col-auto">
                    <button type="submit" class="custom-btn-secondary">Save</button>
                  </div>
                </form>
                <div id="form-htmx-target"></div>
              </fieldset>
            </div>

            <!-- Reset tab -->
            <div class="tab-pane fade" id="reset" role="tabpanel" aria-labelledby="reset-tab">
              <h2 class="mb-4">Reset</h2>
              <fieldset>
                <legend class="fs-5 fw-bold">Reset all preferences</legend>
                <p>You can reset all cookies and use PixivFE's default preferences instead. This action will remove all customized settings.</p>
                <form id="reset-all-form" hx-post="/settings/reset-all" hx-target="next #form-htmx-target" hx-swap="outerHTML">
                  <button type="submit" class="btn btn-danger fw-bold rounded-pill">Reset all preferences</button>
                  <div id="reset-all-help" class="form-text">
                    <span class="fw-bold">This action will reset all your preferences to default values. It cannot be undone.</span>
                  </div>
                </form>
                <div id="form-htmx-target"></div>
              </fieldset>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{{- end }}
